<template>
  <div class="calendar-picker-warp">
    <div v-if="isPickerDate" class="calendar-picker-header">
      <span class="iconfont icon-left" @click="prevMonth" />
      <div class="calendar-header-info">
        <span @click="showPickerYear">{{ viewDate.year }}年</span>
        <span @click="showPickerMonth">{{ viewDate.month }}月</span>
      </div>
      <span class="iconfont icon-right" @click="nextMonth" />
    </div>
    <div v-if="isPickerYear" class="calendar-picker-header">
      <span class="iconfont icon-left" @click="prevYearView" />
      <div class="calendar-header-info">
        <span v-if="years.length>0">{{ years[0] }}年-{{ years[years.length-1] }}年 </span>
      </div>
      <span class="iconfont icon-right" @click="nextYearView" />
    </div>
    <div v-if="isPickerMonth" class="calendar-picker-header">
      <span class="iconfont icon-left" @click="prevYear" />
      <div class="calendar-header-info">
        <span>{{ viewDate.year }}年</span>
      </div>
      <span class="iconfont icon-right" @click="nextYear" />
    </div>
    <div v-if="isPickerMonth" class="calendar-picker-container">
      <ul class="calendar-picker-list">
        <li v-for="(item,i) in months" :key="i" :class="{active:item===viewDate.month}">
          <div class="calendar-picker-item" @click="checkedMonth(item)">{{ item }}月</div>
        </li>
      </ul>
    </div>
    <div v-if="isPickerYear" class="calendar-picker-container">
      <ul class="calendar-picker-list">
        <li v-for="(item,i) in years" :key="i" :class="{active:item===viewDate.year}">
          <div class="calendar-picker-item" @click="checkedYear(item)">{{ item }}年</div>
        </li>
      </ul>
    </div>
    <div v-if="isPickerDate" class="calendar-picker-container">
      <table class="calendar-date-table">
        <thead>
          <tr>
            <td v-for="(item,i) in days" :key="i">{{ item }}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row,y) in dates" :key="y">
            <td v-for="(cell,x) in row" :key="x" :class="viewDate.month===cell.month?'is-curMonth':'not-curMonth'">
              <div class="calendar-date-cell" :class="{active:isSelected(cell)}" @click="checkedDay(cell)">
                <div class="solar-text">{{ cell.date }}</div>
                <div class="lunar-text">{{ cell | fmtLunar }}</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import calendar from '../../../components/calendar'
export default {
  name: 'CalendarPicker',
  filters: {
    fmtLunar(date) {
      const lunar = calendar.solar2lunar(date.year, date.month, date.date)
      return lunar.lDay === 1 ? lunar.IMonthCn : lunar.IDayCn
    }
  },
  data() {
    return {
      viewDate: {
        year: '',
        month: ''
      },
      days: ['日', '一', '二', '三', '四', '五', '六'],
      years: [],
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      dates: [],
      isPickerYear: false,
      isPickerMonth: false,
      isPickerDate: true,
      checkedDate: ''
    }
  },
  created() {
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth() + 1
    this.viewDate = { year, month }
    this.dates = this.getMonthView(year, month)
    this.getYearView(year - 8)
  },
  methods: {
    getMonthView(year, month) {
      const firstDate = new Date(year, month - 1, 1, 0, 0, 0, 0)
      const oneDay = 24 * 3600 * 1000
      const firstViewDate = new Date(firstDate - (firstDate.getDay() * oneDay))
      const viewsDate = []
      let week = []
      for (let i = 0; i < 42; i++) {
        const item = new Date(firstViewDate.getTime() + (i * oneDay))
        const day = item.getDay()
        const dateCell = {
          year: item.getFullYear(),
          month: item.getMonth() + 1,
          date: item.getDate(),
          day: item.getDay(),
          time: item.getTime()
        }
        week.push(dateCell)
        if (week.length > 7) {
          week.shift()
        }
        if (day === 6) {
          if ((week[0].month === month) || (week[week.length - 1].month === month)) {
            viewsDate.push(week)
          }
          week = []
        }
      }
      return viewsDate
    },
    getYearView(minYear) {
      const years = []
      for (let i = 1; i <= 16; i++) {
        years.push(minYear + i)
      }
      this.years = years
    },
    prevYearView() {
      const minYear = this.years[0] - 17
      this.getYearView(minYear)
    },
    nextYearView() {
      const minYear = this.years[this.years.length - 1]
      this.getYearView(minYear)
    },
    nextYear() {
      this.viewDate.year += 1
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    prevYear() {
      this.viewDate.year -= 1
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    nextMonth() {
      const next = this.viewDate.month + 1
      if (next > 12) {
        this.viewDate.year += 1
        this.viewDate.month = 1
      } else {
        this.viewDate.month = next
      }
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    prevMonth() {
      const prev = this.viewDate.month - 1
      if (prev < 1) {
        this.viewDate.year -= 1
        this.viewDate.month = 12
      } else {
        this.viewDate.month = prev
      }
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
    },
    checkedYear(year) {
      this.viewDate.year = year
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
      this.isPickerDate = true
      this.isPickerMonth = false
      this.isPickerYear = false
    },
    checkedMonth(month) {
      this.viewDate.month = month
      this.dates = this.getMonthView(this.viewDate.year, this.viewDate.month)
      this.isPickerDate = true
      this.isPickerMonth = false
      this.isPickerYear = false
    },
    checkedDay(day) {
      const date = day.year + '-' + day.month + '-' + day.date
      this.checkedDate = date
    },
    showPickerYear() {
      this.getYearView(this.viewDate.year - 8)
      this.isPickerDate = false
      this.isPickerMonth = false
      this.isPickerYear = true
    },
    showPickerMonth() {
      this.isPickerDate = false
      this.isPickerMonth = true
      this.isPickerYear = false
    },
    isSelected(day) {
      const date = day.year + '-' + day.month + '-' + day.date
      if (this.checkedDate === date) {
        return true
      }
      return false
    }
  }
}
</script>

<style scoped lang="less">
  @color: #4b4b4b;
  @font-color:#666666;
  @disabled-color: #a3a3a3;
  @active-color:#3a8ee6;
  @hover-bg: #f2f2f2;
  @active-bg: rgba(40, 146, 248, 0.1);
  .calendar-picker-warp{
    width: 300px;
    border-radius: 4px;
    color: @color;
    background-color: #ffffff;
    border: 1px solid #d1d1d1;
  }
  .calendar-picker-list:after{
    display: table;
    clear: both;
    content: '';
  }
  .calendar-picker-list{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .calendar-picker-list li{
    float: left;
    width: 25%;
    padding: 5px;
    box-sizing: border-box;
  }
  .calendar-picker-item{
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    color: @color;
    border-radius: 4px;
    padding: 5px 0;
    cursor: pointer;
  }
  .calendar-picker-list li:hover .calendar-picker-item{
    background-color: @hover-bg;
  }
  .calendar-picker-list li.active .calendar-picker-item{
    color: @active-color;
    background-color: @active-bg;
  }
  .calendar-picker-container{

  }
  .calendar-picker-header{
    height: 30px;
    position: relative;
  }
  .calendar-header-info span{
    cursor: pointer;
  }
  .calendar-picker-header .icon-left{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: @color;
    cursor: pointer;
  }
  .calendar-picker-header .icon-right{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: @color;
    cursor: pointer;
  }
  .calendar-picker-header .iconfont:hover{
    background-color: @hover-bg;
    border-radius: 50%;
  }
  .calendar-header-info{
    margin: 0 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .calendar-date-table{
    width: 100%;
    border-collapse: collapse;
  }
  .calendar-date-table thead tr td{
    height: 30px;
    text-align: center;
    font-size: 14px;
    color: @color;
  }
  .calendar-date-cell{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 100%;
    flex-wrap: wrap;
    height: 40px;
    cursor: pointer;
    border-radius: 4px;
    color: @color;
  }
  .calendar-date-cell:hover{
    background-color: @hover-bg;
  }
  .solar-text{
    width: 100%;
    font-size: 14px;
    line-height: 16px;
  }
  .lunar-text{
    font-size: 12px;
    line-height: 14px;
  }
  .not-curMonth .calendar-date-cell{
    color:  @disabled-color;
  }
  .not-curMonth .calendar-date-cell.active{
    color:  @disabled-color;
    background-color: @hover-bg;
  }
  .is-curMonth .calendar-date-cell.active{
    color: @active-color;
    background-color: @active-bg;
  }
</style>
